<template>
  <el-dialog v-model="visible" class="oldSelectDialog" title="查看数据" @close="handleClose">
    <div class="dialogCenter">
      <el-form ref="ruleForm" :data="pagination" :label-width="116">
        <el-row>
          <el-col :span="24">
            <el-row>
              <el-col :span="9">
                <el-form-item label="老人姓名：" name="name">
                  <el-input v-model="pagination.name" class="form-item-content" clearable placeholder="请输入"
                            type="search"/>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item class="label-wt" label="老人身份证号：" name="idCardNo">
                  <el-input v-model="pagination.idCardNo" class="form-item-content" clearable placeholder="请输入"
                            type="search"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">

                <div class="searchBtn">
                  <el-button @click="handleReset">重 置</el-button>
                  <el-button type="primary" @click="handleSearch">搜 索</el-button>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <el-table ref="multipleTableRef" :data="dialogData" style="width: 100%" @row-click="chooseone"
                @current-change="handleCurrentChange">
        <el-table-column width="55">
          <template #default="scope">
            <el-radio v-model="selectedRowKeys" :label="scope.row.id"><span class="el-radio__label"></span></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="50"/>
        <el-table-column label="老人姓名" prop="name" width="180"/>
        <el-table-column label="老人身份证号" prop="idCardNo"/>
        <el-table-column label="床位号" prop="bedNumber" width="180"/>
      </el-table>

      <Pagination
          v-show="pagination.total > 0"
          v-model:limit="pagination.pageSize"
          v-model:page="pagination.pageNum"
          :total="pagination.total"
          @pagination="getList"
      />

      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSub">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from 'vue';
import {ElMessage} from 'element-plus';

const props = defineProps({
  dialogData: {
    type: Array,
    default: () => [],
  },
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Object,
    default: () => ({}),
  },
  dataLoading: {
    type: Boolean,
    default: false,
  },
  formData: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits([
  'handleCloseDialog',
  'getCurrent',
  'getOldList',
  'handleSelectOld',
  'handleSearch',
  'handleReset',
]);
const regTable = ref();
const ruleForm = ref(null);
const visible = ref(false);
const selectedRowKeys = ref('');
const checkTabData = reactive({});
const currentSelectItem = ref({});

watch(props, (val) => {
  visible.value = val.dialogVisible;
  if (visible.value) {
    if (val.formData.elderId !== undefined) {
      selectedRowKeys.value = val.formData.elderId;
    } else {
      selectedRowKeys.value = '';
    }
  }
});

// 确认提交
const handleSub = async () => {
  if (selectedRowKeys.value.length === 0) {
    ElMessage.error('未选择老人，请选择老人信息');
  } else {
    emit('handleSelectOld', checkTabData.value);
    handleClose();
  }
};

// 关闭弹层
const handleClose = () => {
  ruleForm.value.resetFields();
  emit('handleCloseDialog');
};

// 点击翻页
const onPageChange = (pageInfo) => {
  emit('getCurrent', pageInfo);
};

// 搜索
const handleSearch = () => {
  emit('handleSearch');
};

// 清空搜索数据
const handleReset = () => {
  console.log(ruleForm.value);
  ruleForm.value.resetFields();
  emit('handleReset');
};
const getList = (val) => {
  emit('getOldList', val);
};

// 触发单选框
const handleCurrentChange = (row) => {
  checkTabData.value = row;
};
const chooseone = (row) => {
  selectedRowKeys.value = row.elderId;
};
</script>
